<template>
  <div class="home">
    <div id="userInfo" style="width: 100%;height:100px;">
      姓名：- {{ name }} - 年龄： - {{ age }} - 住址 -{{ address }} - <button @click="changeAge"> 改变年龄 </button>
    </div>
    <div id="content" style="width: 100%;height:100px;">
      <ul style="width:100%;list-style: none;">
        <li style="float: left;width: 70%;">
          <div ref="chart2" style="width: 100%;height:500px;"></div>
        </li>
        <li style="float: left;width: 30%;">
          <div id="main" ref="chart3" style="width: 100%;height:500px;"></div>
        </li>
      </ul>
    </div>
    
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china'
import { toRefs, reactive, onMounted, ref } from 'vue'
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
//vue 3.0 使用的是 代理 proxy 兼容性不是那么好
// ref() 中只有一个属性 value 使用时 defaultName.value
const defaultName = ref('朱晓谭')
export default {
  name: 'Home',
  components: {
    
  },
  // 响应式数据 setup 启动函数默认会有两个参数(props, context){root}
  // setup(props, {root}) {
  setup() {
      const state = reactive({
        name: '朱小璋',
        address: '大明京都南京',
        job: '皇帝，政治家',
        age: 38,
        chart2: ref()
      })
      const changeAge = ()=> {
        state.age +=1
        console.log(state.age)
        console.log(defaultName.value)
      }
      const init = ()=> {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(state.chart2);
        // 指定图表的配置项和数据
        var option = {
            title:   { text: '中国地图' },
            // 类型
            series:  [{
              type: 'map', 
              map: 'china', 
              label: {
                show: true, // 是否显示文字
                color: 'red',
                fontSize: 12
              }
            }],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
      
      onMounted(()=>{
        init();
      })

      const userMethods = {
        login(){},
        validateCode(){}
      }

      return {
        // torefs 将对象转为响应式数据
        ...toRefs(state),
        changeAge,
        defaultName,
        ...userMethods
      }

  }
}
</script>
